<template>
	<view @touchmove.stop.prevent @click="closed">
		<u-popup :show="visible" :safeAreaInsetBottom="false" mode="bottom" bgColor="transparent">
			<view class="panel" @touchmove.stop.prevent>
				<image class="panel-closed" :src="$ICON('/closed.png')" @click="closed" />
				<view class="panel-head">购买须知</view>
				<view class="panel-tab">
					<up-tabs :list="detail" keyName="title" lineWidth="116rpx" lineHeight="2rpx" lineColor="#B41732"
						:activeStyle="{
							color: '#B41732',
							fontWeight: '400',
							fontSize: '28rpx'
						}" :inactiveStyle="{
							color: '#000000',
							fontWeight: '400',
							fontSize: '28rpx'
						}" @change="handlerChange" />
				</view>
				<view class="panel-body">
					<scroll-view style="height: 100%;" scroll-y @touchmove.stopy>
						<u-parse :content="currentContent" />
					</scroll-view>
				</view>
				<view class="panel-submit panel-dis" v-if="time > 0">我已阅读并同意购买须知({{ time }}s)</view>
				<view class="panel-submit" v-else @click="success">我已阅读并同意购买须知</view>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	const emit = defineEmits(['closed', 'success'])
	const visible = ref(false)
	const time = ref(10)
	const detail = ref<any[]>([])
	const currentContent = ref('')
	const timer = ref()
	const start = () => {
		if (timer.value) {
			clearInterval(timer.value)
		}
		timer.value = setInterval(() => {
			time.value--
		}, 1000)
	}
	const handlerChange = (e: any) => {
		currentContent.value = ''
		nextTick(() => {
			currentContent.value = e.content
		})
	}
	const closed = () => {
		visible.value = false
		emit('closed')
	}
	const open = (data: any[]) => {
		detail.value = data
		currentContent.value = data[0]?.content || ''
		visible.value = true
		time.value = 10
		start()
		return
	}
	const success = () => {
		emit('success')
		closed()
	}
	defineExpose({ open })
</script>

<style lang="scss" scoped>
	.panel {
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		width: 100%;
		padding: 34rpx 0 30rpx 0;
		overflow: hidden;
		position: relative;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

		&-head {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			line-height: 50rpx;
			margin-bottom: 12rpx;
		}

		&-closed {
			position: absolute;
			right: 22rpx;
			top: 34rpx;
			width: 50rpx;
			height: 50rpx;
			display: block;
		}

		&-body {
			margin: 0 24rpx;
			height: 748rpx;
			background: #F7F7F7;
			border-radius: 32rpx;
			margin-bottom: 40rpx;
			padding: 30rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		&-submit {
			margin: 0 auto;
			width: calc(100% - 48rpx);
			height: 72rpx;
			background: var(--themeColors);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}

		&-dis {
			background: #CCCCCC;
		}
	}
</style>
